<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" http://www.w3.org/TR/html4/loose.dtd>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JQzoom 2 Demo</title>
<script src="<?php echo base_url(); ?>javascript/jqzoom/js/jquery-1.6.js" type="text/javascript"></script>
<script src="<?php echo base_url(); ?>javascript/jqzoom/js/jquery.jqzoom-core.js" type="text/javascript"></script>

<link rel="stylesheet" href="<?php echo base_url(); ?>javascript/jqzoom/css/jquery.jqzoom.css"
	type="text/css">

<style type="text/css">
body {
	margin: 0px;
	padding: 0px;
	font-family: Arial;
}

a img,:link img,:visited img {
	border: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

:focus {
	outline: none;
}

* {
	margin: 0;
	padding: 0;
}

p,blockquote,dd,dt {
	margin: 0 0 8px 0;
	line-height: 1.5em;
}

fieldset {
	padding: 0px;
	padding-left: 7px;
	padding-right: 7px;
	padding-bottom: 7px;
}

fieldset legend {
	margin-left: 15px;
	padding-left: 3px;
	padding-right: 3px;
	color: #333;
}

dl dd {
	margin: 0px;
}

dl dt {
	
}

.clearfix:after {
	clear: both;
	content: ".";
	display: block;
	font-size: 0;
	height: 0;
	line-height: 0;
	visibility: hidden;
}

.clearfix {
	display: block;
	zoom: 1
}

ul#thumblist {
	display: block;
}

ul#thumblist li {
	float: left;
	margin-right: 2px;
	list-style: none;
}

ul#thumblist li a {
	display: block;
	border: 1px solid #CCC;
}

ul#thumblist li a.zoomThumbActive {
	border: 1px solid red;
}

.jqzoom {
	text-decoration: none;
	float: left;
}
</style>

<script type="text/javascript">
	$(document).ready(function() {
		$('.jqzoom').jqzoom({
			zoomType : 'reverse',
			lens : true,
			preloadImages : false,
			alwaysOn : false
		});
		//$('.jqzoom').jqzoom();
	});
</script>
</head>

<body>
	<div class="clearfix" id="content"
		style="margin-top: 10px; margin-left: 20px; height: 500px; width: 700px;">
		<div class="clearfix">
			<a href="<?php echo base_url(); ?>images/jqzoom/plateau2Gr.jpg" class="jqzoom"
				rel='gal1' title="Plateaux fromages"> <img
				src="<?php echo base_url(); ?>images/jqzoom/plateau2moyen.jpg"
				title="Plateaux fromages" style="border: 4px solid #666;">
			</a>
		</div>
		<br />
		<div class="clearfix">
			<ul id="thumblist" class="clearfix">
				<table>
					<tr>
						<td>
							<li><a class="zoomThumbActive" href='javascript:void(0);'
								rel="{gallery: 'gal1', smallimage: '<?php echo base_url(); ?>images/jqzoom/plateau2moyen.jpg',largeimage: '<?php echo base_url(); ?>images/jqzoom/plateau2Gr.jpg'}"><img
									src='<?php echo base_url(); ?>images/jqzoom/plateau2pt.jpg'></a></li>
							<li><a href='javascript:void(0);'
								rel="{gallery: 'gal1', smallimage: '<?php echo base_url(); ?>images/jqzoom/plateau3moyen.jpg',largeimage: '<?php echo base_url(); ?>images/jqzoom/plateau3Gr.jpg'}"><img
									src='<?php echo base_url(); ?>images/jqzoom/plateau3pt.jpg'></a></li>
							<li><a href='javascript:void(0);'
								rel="{gallery: 'gal1', smallimage: '<?php echo base_url(); ?>images/jqzoom/plateau4moyen.jpg',largeimage: '<?php echo base_url(); ?>images/jqzoom/plateau4Gr.jpg'}"><img
									src='<?php echo base_url(); ?>images/jqzoom/plateau4pt.jpg'></a></li>
							<li><a href='javascript:void(0);'
								rel="{gallery: 'gal1', smallimage: '<?php echo base_url(); ?>images/jqzoom/plateau1Gr.jpg',largeimage: '<?php echo base_url(); ?>images/jqzoom/plateau1Gr.jpg'}"><img
									src='<?php echo base_url(); ?>images/jqzoom/plateau1pt.jpg'></a></li>
						</td>
					</tr>
					<tr>
						<td>
							<li><a href='javascript:void(0);'
								rel="{gallery: 'gal1', smallimage: '<?php echo base_url(); ?>images/jqzoom/plateau5moyen.jpg',largeimage: '<?php echo base_url(); ?>images/jqzoom/plateau5Gr.jpg'}"><img
									src='<?php echo base_url(); ?>images/jqzoom/plateau5pt.jpg'></a></li>
							<li><a href='javascript:void(0);'
								rel="{gallery: 'gal1', smallimage: '<?php echo base_url(); ?>images/jqzoom/plateau6moyen.jpg',largeimage: '<?php echo base_url(); ?>images/jqzoom/plateau6Gr.jpg'}"><img
									src='<?php echo base_url(); ?>images/jqzoom/plateau6pt.jpg'></a></li>
							<li><a href='javascript:void(0);'
								rel="{gallery: 'gal1', smallimage: '<?php echo base_url(); ?>images/jqzoom/plateau7moyen.jpg',largeimage: '<?php echo base_url(); ?>images/jqzoom/plateau7Gr.jpg'}"><img
									src='<?php echo base_url(); ?>images/jqzoom/plateau7pt.jpg'></a></li>
							<li><a href='javascript:void(0);'
								rel="{gallery: 'gal1', smallimage: '<?php echo base_url(); ?>images/jqzoom/plateau8moyen.jpg',largeimage: '<?php echo base_url(); ?>images/jqzoom/plateau8Gr.jpg'}"><img
									src='<?php echo base_url(); ?>images/jqzoom/plateau8pt.jpg'></a></li>
						</td>
					</tr>
				</table>
			</ul>
		</div>
	</div>
</body>
</html>